<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第三章 盒子模型、布局、定位</title>
    <link rel="stylesheet" href="chapter03.css">
</head>
<body>
    <h1>第三章 盒子模型、布局、定位</h1>

    <h2>3.1 盒子模型</h2>
    
    <div class="site-topbar">
            <div class="container">
                <div class="topbar-nav">
                        <a href="">小米商城</a>
                        <a href="">MIUI</a>    
                        <a href="">IoT</a>    
                        <a href="">云服务</a>    
                        <a href="">金融</a>    
                        <a href="">有品</a>    
                        <a href="">小爱开放平台</a>    
                        <a href="">政企服务</a>    
                        <a href="">下载app</a>    
                        <a href="">Select Region</a>
                </div>
                <div class="topbar-cart">
                    登录|注册|消息通知 
                </div>
    
                <div class="topbar-info">
                    购物车（0）
                </div>         
            </div>
    </div>

    <h2>3.2 布局</h2>

    <h2>3.3 定位</h2>
</body>
</html>